<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最简单的Store</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vuex@next"></script>
</head>
<body>

    <div id="app">
        <button type="button" @click="increase">+</button>
        <div>{{ $store.state.count }}</div>
    </div>

    <script>
        // 创建一个新的 store 实例
        const store = Vuex.createStore({
            // 启用严格模式，避免直接修改状态
            strict: true ,
            // 状态
            state () {
                return {
                    count: 0
                }
            },
            // Mutation
            mutations: {
                increment (state) {
                    state.count++
                }
            }
        });

        const app = Vue.createApp({
           methods: {
               increase(){
                   // 直接更改 store 中的状态
                   // this.$store.state.count++ ;// 反对

                   // 向 store 提交 指定名称的 mutation
                   this.$store.commit( 'increment' ); // 赞成
               }
           }
        });
        // 将 store 实例作为插件安装
        app.use( store );
        app.mount( "#app" )
    </script>

</body>
</html>